function detailshow() {
  this.oProWrap = $(".product_wrap")
  this.oShowcase = this.oProWrap.find(".showcase")
  this.oThumbnails = this.oProWrap.find(".thumbnails ul")
  this.oCltWrap = this.oProWrap.find(".collect_wrap")

  // 详情
  this.oGTitle = this.oProWrap.find(".product_right h1")
  this.oGText = this.oProWrap.find(".product_right h5")
  this.oGPrice = this.oProWrap.find(".price")
  this.oGSpan = this.oProWrap.find(".sku_tag")
  this.oGColor = this.oProWrap.find(".sku_color .sku_list")
  this.oGWeight = this.oProWrap.find(".sku_spec div")

  this.oNumWrap = this.oProWrap.find(".sku_num")
  this.oFbtn = this.oProWrap.find(".floor_btn")

  // 放大镜
  this.oLoupe = this.oProWrap.find(".loupe")
  this.oLoupeB = this.oProWrap.find(".loupe_big")
  this.oBImg = this.oProWrap.find(".bImg")
  this.oSImg = this.oProWrap.find(".sImg")

  this.username = localStorage.getItem('ACTIVE_USER')
  this.id = location.search.split('=')[1]
  this.num
  this.datshow()
  this.detailEvent()
  this.loupeEvent()
}


detailshow.prototype.datshow = function () {
  detail({
    id: this.id
  }).then(res => {
    if (res.status) {
      console.log(res);
      var res = res.data
      // this.oShowcase.html(`<img src="${res.goods_imgs}" alt="">`)
      $(".sImg")[0].src = res.goods_imgs
      $(".bImg")[0].src = res.goods_imgs
      this.oGTitle.html(res.goods_title)
      this.oGText.html(res.goods_text)
      this.oGPrice.html(res.goods_price)
      this.oGColor.html(`<img src="${res.goods_imgs}" alt="">
     <span>${res.goods_color}</span>`)
      this.oGWeight.html(res.goods_weight)
    }
  })
}

detailshow.prototype.detailEvent = function () {

  this.oNumWrap.click((e) => {
    const target = e.target
    //改变加入购物车数量
    if (target.classList.contains("plus")) {
      const num = $(target).prev().val() * 1
      if (num == 5) {
        return
      }
      $(target).prev().val(num + 1)
      $(target).prev().attr("index", num + 1)
    }
    if (target.classList.contains("minus")) {
      const num = $(target).next().val()
      if (num == 1) {
        return
      }
      $(target).next().val(num - 1)
      $(target).next().attr("index", num - 1)
    }
  })

  //输入加入购物车数量
  this.oNumWrap.change((e) => {
    const target = e.target
    if (target.classList.contains("num_sync")) {
      let regnum = /^-?[1-9]\d*$/
      let num = $(target).val()
      // console.log($(target).attr("index"));
      if (!(regnum.test(num)) || num > 5) {
        num = $(target).attr("index")
      }
      $(target).val(num)
      $(target).attr("index", num)
    }
  })

  this.oFbtn.click((e) => {
    const target = e.target
    //点击加入购物车
    if (target.classList.contains("cart_btn")) {
      console.log(12);
      if (this.username) {
        this.num = $(".num").val() * 1
        console.log(this.num);
        addcart({
          num: this.num,
          tellnumber: this.username,
          id: this.id
        }).then(res => {
          console.log(res);
          location.href = `./cart.html`
        })
      } else {
        alert("请先登入")
        location.href = `./login.html?HISTORY=./detail.html?id=${this.id}`
      }

    }
  })

}

//放大镜
detailshow.prototype.loupeEvent = function () {
  let r = this.oLoupe.outerWidth() / 2
  var maxX = this.oShowcase.innerWidth() - this.oLoupe.outerWidth()
  var maxY = this.oShowcase.innerHeight() - this.oLoupe.outerHeight()
  console.log(this.oShowcase.width());
  var scale = this.oBImg.width() / this.oShowcase.width()
  //跟随移动
  this.oShowcase.mousemove((e) => {
    let x = e.offsetX - r
    let y = e.offsetY - r
    if (x > maxX) x = maxX
    if (y > maxY) y = maxY
    if (x < 0) x = 0
    if (y < 0) y = 0
    this.oLoupe.css("left", x + "px")
    this.oLoupe.css("top", y + "px")
    this.oBImg.css("left", -x * scale + "px")
    this.oBImg.css("top", -y * scale + "px")
  })
  //移入出现
  this.oShowcase.mouseover(() => {
    this.oLoupe.css("visibility", "visible")
    this.oLoupeB.css("visibility", "visible")
  })
  this.oShowcase.mouseout(() => {
    this.oLoupe.css("visibility", "hidden")
    this.oLoupeB.css("visibility", "hidden")
  })
  //  移出消失
  $(".thumbnails").click((e) => {
    var target = e.target
    if (target.classList.contains("det_img_item")) {
      this.oSImg[0].src = target.src
      this.oBImg[0].src = target.src
    }
  })

}


new detailshow()